<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div>
						<!-- <div class="searchArea">
							<el-input v-model="query.keywords" placeholder="关键字搜索"/>
							<el-button type="primary" @click="loadData()">搜索</el-button>
						</div> -->
						<div class="searchArea">
							<el-row :gutter="15">
							<el-col :span="3">
								<el-select v-model="catLev1" clearable placeholder="一级品类"  @change="selectLev1()">
									<el-option
										v-for="lev in lev1s"
										:key="lev.id"
										:value="lev.id"
										:label="lev.name">
									</el-option>
								</el-select>
							</el-col>

							<el-col :span="3">
								<el-select v-model="query.categoryId" clearable placeholder="二级品类">
									<el-option
										v-for="lev in lev2s"
										:key="lev.id"
										:value="lev.id"
										:label="lev.name">
									</el-option>
								</el-select>
							</el-col>

							<el-col :span="3">
								<el-select v-model="query.venderId" clearable placeholder="商户">
									<el-option
									v-for="v in venders"
									:key="v.id"
									:value="v.id"
									:label="v.name">
									</el-option>
								</el-select>
							</el-col>

							<el-col :span="2">
								<el-select v-model="query.status" clearable placeholder="状态">
									<el-option
									v-for="stat in wareStatus"
									:key="stat.label"
									:value="stat.value"
									:label="stat.label">
									</el-option>
								</el-select>
							</el-col>

                <el-col :span="2">
                  <el-select v-model="query.hotStatus" clearable placeholder="热销">
                    <el-option
                      v-for="stat in wareHotStatus"
                      :key="stat.label"
                      :value="stat.value"
                      :label="stat.label">
                    </el-option>
                  </el-select>
                </el-col>

							<el-col :span="8">
								<el-date-picker
									v-model="onsaleTime"
									type="daterange" value-format="yyyy-MM-dd"
									start-placeholder="开始日期"
									end-placeholder="结束日期">
								</el-date-picker>
							</el-col>

							<el-col :span="2">
								<el-button type="primary" @click="loadData()">确定</el-button>
							</el-col>
							</el-row>
						</div>

						<div>
							<el-table
								:data="wareData"
								style="width: 100%">
								<el-table-column
								prop="id"
								label="商品编号"
								width="180">
								</el-table-column>
								<el-table-column
								prop="name"
								label="商品名称"
								width="180">
								</el-table-column>
								<el-table-column
								prop="cat1Name"
								label="一级品类">
								</el-table-column>
								<el-table-column
								prop="cat2Name"
								label="二级品类">
								</el-table-column>
								<el-table-column
								prop="price"
								label="售价">
								</el-table-column>
								<el-table-column
								prop="stock"
								label="库存">
								</el-table-column>
								<el-table-column
								prop="venderName"
								label="商户">
								</el-table-column>
								<el-table-column
								prop="statusName"
								label="状态">
								</el-table-column>
								<el-table-column
								prop="handler"
								label="操作">
								    <template slot-scope="scope">
										<el-button @click="viewWare(scope.row)" type="text" size="small">查看</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>


						<div class="block paginationStyle">
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="query.pageNo"
							:page-sizes="[20,40,100]"
							:page-size="query.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="query.totalSize">
							</el-pagination>
						</div>

					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	export default{
		name:'WareList',
		methods: {
		  //每页多少条数据
			handleSizeChange(val){
				this.query.pageSize = val;
				this.loadData();
			},
      //当前第几页
			handleCurrentChange(val){
				this.query.pageNo = val;
				this.loadData();
			},
      //获取二级分类方法
			selectLev1(){
				var that = this;
				that.lev2s = [];
				this.$api.get('/category/findByParentId/'+that.catLev1,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.lev2s.push({
								"id":data.data[i].id,
								"name":data.data[i].name
							});
						}
					} else{
						this.$message.error(data.msg);
					}
				});
			},
      //跳转商品详情方法
			viewWare(row){
				this.$router.push('/ware/'+row.id);
			},
      //加载分页信息
			loadData(){
				var that = this;
				this.$api.post('/shop/page',that.query,function(data){
					if(data.flag=="success"){
						that.query.totalSize = data.data.total;
						that.wareData = data.data.records;
						for(var i=0;i<that.wareData.length;i++){
							that.wareData[i].statusName = that.getStatusNameById(that.wareData[i].status);
						}
					}else{
						this.$message.error(data.msg);
					}
				});
			},
			getStatusNameById(id){
				for(var i=0;i<this.wareStatus.length;i++){
					if(this.wareStatus[i].value==id){
						return this.wareStatus[i].label;
					}
				}
				return null;
			}
		},
		watch:{
			onsaleTime(curVal,oldVal){
				if(curVal==null){
					this.query.onsaleTimeBegin = "";
					this.query.onsaleTimeEnd = "";
				} else{
					this.query.onsaleTimeBegin = curVal[0];
					this.query.onsaleTimeEnd = curVal[1];
				}

			}
		},
		mounted(){
		  //初始化顶级父类
			var that = this;
			this.$api.get('/category/findByParentId/0',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.lev1s.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});
      //初始化所有商户
			this.$api.get('/vender/getAll',null,function(data){
				if(data.flag=="success"){
					for(var i=0;i<data.data.length;i++){
						that.venders.push({
							"id":data.data[i].id,
							"name":data.data[i].name
						});
					}
				} else{
					this.$message.error(data.msg);
				}
			});
			this.loadData();
		},
		data:function(){
			return {
				catLev1:"",
				onsaleTime:[],
				query:{
					categoryId:"",
					venderId:"",
					status:"",
					onsaleTimeBegin:"",
					onsaleTimeEnd:"",
					pageNo:1,
					pageSize:40,
					totalSize:0,
          hotStatus:""
				},
				navs:["兑换商城管理","商品列表"],
				wareStatus:this.GLOBAL.wareStatus,
        wareHotStatus:this.GLOBAL.wareHotStatus,
				lev1s:[],
				lev2s:[],
				venders:[],
				wareData:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>

	.searchArea{
		margin-bottom: 15px;
	}

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-input{
	width: 220px !important;
  }
  .paginationStyle{
	  margin-top: 15px;
	  float:right;
  }
</style>
